<template>
  <div
    class="rounded-2xl w-48 h-8 bg-[var(--inputBg)] py-1 px-2 flex m-4 hover:bg-[var(--active)] search"
  >
    <i class="iconfont icon-search text-gray-300 mr-1"></i>
    <input
      :placeholder="placeholder"
      class="w-full bg-transparent outline-none text-gray-700 text-sm"
      type="text"
      @input="searchInput"
    />
  </div>
</template>
<script setup>
import { debounce } from '../../utils/common-fn'

defineProps({
  placeholder: {
    type: String,
    default: '搜索'
  }
})

const searchInput = debounce((e) => {
  console.log(e)
}, 500)
</script>

<style scoped>
.search:focus-within {
  background-color: var(--active);
}
</style>
